<template>
    <a-sub-menu class="rx-app-sub-menu-box" :key="menuInfo.key" v-bind="$props" v-on="$listeners">
        <span slot="title" class="rx-app-children-box">
            <my-icon :type="menuInfo.icon" />
            <span class="rx-app-children-name">{{ menuInfo.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
            <a-menu-item
                v-if="!item.children || item.children.length === 0" :key="item.key"
                class="rx-app-menu-item"
                @click="handleClick(item)"
            >
                <my-icon :type="item.icon" />
                <span>{{ item.title }}</span>
            </a-menu-item>
            <rx-app-sub-menu v-else :key="item.key" :menu-info="item" />
        </template>
    </a-sub-menu>
</template>

<script>
import { Menu } from 'ant-design-vue';
export default {
    name: "rx-app-sub-menu",
    isSubMenu: true,
    props:{
        ...Menu.SubMenu.props,
        menuInfo:{},
        menuClick:{},
    },
    methods:{
        handleClick(menu){
            this.menuClick && this.menuClick(menu);
        }
    }

}
</script>

<style scoped>
.rx-app-sub-menu-box .rx-app-menu-item,
.rx-app-sub-menu-box  >>> .ant-menu-submenu-title{
    margin-bottom: 0;
    margin-top: 0;
}

</style>